import React, { Component } from "react";
import { connect } from "dva";
import { Form, Button, Icon, Table, Modal } from "antd";
import AddNewAttendanceUnit from "./AddNewAttendanceUnit";
import "./ThiftManagement.less";
import {
  taskAttendanceComAttendGroupPageForGroup, //获取考勤组分页查询
  taskAttendanceComAttendGroupDelete //删除考勤组
} from "../../services/api";

const { confirm } = Modal;

@connect(state => ({
  profile: state.profile
}))
@Form.create()
export default class NewAttendanceUnit extends Component {
  state = {
    open: false, //新增班次
    visible: false, //添加地点
    dataSource: [],
    pagenav: {
      current: 1,
      pageSize: 10,
      showQuickJumper: true,
      showSizeChanger: true,
      showTotal: total => `总共 ${total} 条`,
      onShowSizeChange: (current, pageSize) => {
        const pagenav = Object.assign({}, this.state.pagenav);
        pagenav.current = current;
        pagenav.pageSize = pageSize;
        this.setState({ pagenav });
        setTimeout(() => {
          this.taskAttendanceComAttendGroupPageForGroup();
        });
      },
      onChange: (page, pageSize) => {
        const pagenav = Object.assign({}, this.state.pagenav);
        pagenav.current = page;
        pagenav.pageSize = pageSize;
        this.setState({ pagenav });
        setTimeout(() => {
          this.taskAttendanceComAttendGroupPageForGroup();
        });
      },
      total: 0
    }
  };

  componentDidMount() {
    this.taskAttendanceComAttendGroupPageForGroup();
  }

  //获取考勤组分页查询
  taskAttendanceComAttendGroupPageForGroup = () => {
    taskAttendanceComAttendGroupPageForGroup({
      pageSize: this.state.pagenav.pageSize,
      pageNumber: this.state.pagenav.current
    }).then(
      response => {
        console.log(
          response,
          "taskAttendanceComAttendGroupPageForGroup-response"
        );
        const pagenav = { ...this.state.pagenav };
        let { data } = response.data;
        data = data.map((val, i) => {
          val.key = i;
          return val;
        });
        pagenav.total = response.data.total;
        this.setState({
          dataSource: data,
          pagenav
        });
      },
      err => {
        console.log(err, "taskAttendanceComAttendGroupPageForGroup-err");
      }
    );
  };
  //删除考勤组
  taskAttendanceComAttendGroupDelete = (attendGroupId, isFormal) => {
    taskAttendanceComAttendGroupDelete({ attendGroupId, isFormal }).then(
      response => {
        console.log(
          response,
          "taskAttendanceComAttendGroupDelete-response-删除考勤组"
        );
        this.taskAttendanceComAttendGroupPageForGroup();
      },
      err => {
        console.log(err, "taskAttendanceComAttendGroupDelete-err-删除考勤组");
      }
    );
  };

  renderTable = () => {
    const columns = [
      {
        title: "考勤组名称",
        dataIndex: "attendGroupName",
        key: "1",
        width: 200
      },
      {
        title: "人数",
        dataIndex: "perCount",
        key: "2",
        width: 60
      },
      {
        title: "类型",
        dataIndex: "attendType",
        key: "3",
        render: text => {
          return <div>{text}</div>;
        },
        width: 100
      },
      {
        title: "考勤组信息",
        dataIndex: "shiftDetail",
        key: "4",
        render: text => {
          return <div dangerouslySetInnerHTML={{ __html: text }} />;
        }
      },
      {
        title: "操作",
        dataIndex: "e",
        key: "5",
        width: 150,
        render: (text, record) => {
          return (
            <div style={{ color: "rgba(15,113,255,1)" }}>
              <span
                onClick={() => {
                  this.props.history.push(
                    `/attendancemanagement/selectionattendancetype?attendGroupId=${
                      record["attendGroupId"]
                    }&isFormal=${record["isFormal"]}`
                  );
                }}
                style={{ marginRight: 8 }}
              >
                {record.isFormal === "0" ? "继续完善" : "编辑考勤组"}
              </span>
              <span
                onClick={() => {
                  confirm({
                    content: <div>删除该考勤组后不可恢复！请谨慎操作!</div>,
                    okText: "删除",
                    cancelText: "取消",
                    onOk: () => {
                      this.taskAttendanceComAttendGroupDelete(
                        record["attendGroupId"],
                        record["isFormal"]
                      );
                    },
                    onCancel() {
                      console.log("Cancel");
                    }
                  });
                }}
              >
                删除
              </span>
            </div>
          );
        }
      }
    ];

    return (
      <Table
        pagination={this.state.pagenav}
        dataSource={this.state.dataSource}
        columns={columns}
        //loading={this.state.loading}
      />
    );
  };

  render() {
    return (
      <div className="CreateTask CreateThiftManagement">
        <div className="bz-title">考勤组管理</div>
        <Button
          onClick={() => {
            //this.setState({ open: true });
            this.props.history.push(
              "/attendancemanagement/selectionattendancetype"
            );
          }}
          className="new-btn"
          type="primary"
        >
          新增考勤组
        </Button>
        {this.renderTable()}
        {/*  选择班次--新增班次 */}
        <AddNewAttendanceUnit
          ok={open => {
            this.setState({ open });
          }}
          cancel={open => {
            this.setState({ open });
          }}
          open={this.state.open}
        />
        <Modal
          title="选择班次生效时间"
          visible={this.state.visible}
          okText="立即生效"
          cancelText="明日生效"
          onOk={() => {
            this.setState({ visible: false });
          }}
          onCancel={() => {
            this.setState({ visible: false });
          }}
          wrapClassName="thiftModal"
        >
          <Icon type="exclamation-circle" />若选择“立即生效”，今天相关的任务记录会重新核算！
        </Modal>
      </div>
    );
  }
}
